<script setup>
import { ref } from "vue";

const props = defineProps(['api-url', 'per-page'])
const items = ref([])

// 模拟异步获取数据操作
function fetchData(url, page) {
  console.log(url, page)
  setTimeout(() => {
    items.value = [
      { body: 'Scoped Slots Guide', username: 'Evan You', likes: 20 },
      { body: 'Vue Tutorial', username: 'Natalia Tepluhina', likes: 10 }
    ]
  }, 1500)
}
console.log(props)
fetchData(props.apiUrl, props.perPage)
</script>

<template>
  <div>
    <ul>
      <li v-if="!items.length">
        Loading...
      </li>
      <li v-for="(item,index) in items" :key="index">
        <slot name="item" v-bind="item" />
      </li>
    </ul>
  </div>
</template>

<style scoped>
ul {
  list-style-type: none;
  padding: 5px;
  background: linear-gradient(315deg, #42d392 25%, #647eff);
}
li {
  padding: 5px 20px;
  margin: 10px;
  background: #fff;
}
</style>